import { type ThemeType } from '~/types'
import { useSystemStore } from '~/stores/system'

const syStore = useSystemStore()
const defaultTheme = 'dark'

export const useTheme = () => {
  const theme = ref<ThemeType>(defaultTheme) 

  const setTheme = (val: ThemeType) => {
    if (val === 'dark') {
      document.documentElement.setAttribute('theme', 'dark')
      localStorage.setItem('theme', 'dark')
      theme.value = 'dark'
    } else {
      document.documentElement.setAttribute('theme', 'light')
      localStorage.setItem('theme', 'light')
      theme.value = 'light'
    }
    syStore.setColor(theme.value)
  }

  onMounted(() => {
    const theme: any = localStorage.getItem('theme')
    setTheme(theme || defaultTheme)
  })

  return {
    theme,
    setTheme
  }
}
